<template>
  <div class="floating-widget">
    <div class="ask">?</div>
    <div class="remark">
      <p>流程设计说明:</p>
      <p>1、XML文件中的流程定义id属性用作流程定义的key参数。</p>
      <p>2、XML文件中的流程定义name属性用作流程定义的name参数。如果未给定name属性，会使用id作为name。</p>
      <p>3、当每个唯一key的流程第一次部署时，指定版本为1。对其后所有使用相同key的流程定义，部署时版本会在该key当前已部署的最高版本号基础上加1。key参数用于区分流程定义。</p>
      <p>4、id参数设置为{processDefinitionKey}:{processDefinitionVersion}:{generated-id}，其中generated-id是一个唯一数字，用以保证在集群环境下，流程定义缓存中，流程id的唯一性。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bubble',
};
</script>

<style scoped>
.floating-widget {
  position: fixed;
  width: 3em;
  heigth: 3em;
  border-radius: 5em;
  text-align: center;


  bottom: 1em;
  right: 1em;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.floating-widget:hover {
  transform: translateY(-10px);
}

.floating-widget:hover .remark {
  display: block;
}


.remark {
  text-align: left;
  position: fixed;
  width: 50em;
  border-radius: 0.5em;
  padding: 0.5em;
  display: none;

  bottom: 0em;
  right: 3em;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
</style>
